require(['./config'], () => {
    require(['request', 'template', 'header', 'footer', 'jquery'], (req, template) => {
        class List {
            constructor() {
                this.backTop()
                this.getList()
            }

            backTop() {
                // 回到顶部
                const backTop = $('#right-btn .top')
                $(window).scroll(function () {
                    if ($('html').scrollTop() > 100) {
                        backTop.fadeIn(500)
                    }
                    if ($('html').scrollTop() < 100) {
                        backTop.fadeOut(500)
                    }
                })
                backTop.click(function () {
                    $('html').animate({
                        scrollTop: 0
                    }, 500)
                })
            }

            // 调用接口，获取列表数据
            getList() {
                // 从地址栏获取id
                const { search } = window.location
                const id = search.split('=')[1]
                // 通过id发送请求
                req.list_getData(id)
                    .then(res => {
                        // 解构数据
                        const { nextIndex, perpage, startIndex, total } = res.data.items
                        let myData = { nextIndex, perpage, startIndex, total, list: [] }
                        // 处理 res 数据 只把要用的东西传过去
                        res.data.items.list.map(item => {
                            const { id, image, title, price, saleNum } = item
                            myData.list.push({ id, image, title, price, saleNum })
                        })
                        console.log(myData);
                        // 获取列表数据成功后，调用渲染列表方法
                        this.createList(myData)
                    })
            }

            // 渲染列表数据
            createList(myData) {
                const { list } = myData
                $('#listContent').html(template('listTemplate', { list }))
                this.goDetail(list)
            }

            // 给li绑定点击事件
            goDetail(list) {
                $('#listContent').on('click', 'li', function () {
                    // console.log($(this))
                    // 拿到当前这个 li 在父元素里面的索引 然后再 list 里面去取相应的数据
                    const index = $(this).index()
                    const { id } = list[index]
                    window.location.href = `/html/detail.html?id=${id}`
                })
            }
        }
        return new List()
    })
})